// base color
$blue: #324157;
$light-blue: #3A71A8;
$red: #C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow: #FEC171;
$panGreen: #30B08F;

// 默认菜单主题风格
$base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5;
$base-menu-background: #304156;
$base-logo-title-color: #ffffff;

$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529;

$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;

// 自定义暗色菜单风格
/**
$base-menu-color:hsla(0,0%,100%,.65);
$base-menu-color-active:#fff;
$base-menu-background:#001529;
$base-logo-title-color: #ffffff;

$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529;

$base-sub-menu-background:#000c17;
$base-sub-menu-hover:#001528;
*/

$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;

$base-sidebar-width: 220px;
// 中电云色彩 
$primary-1: #E5EFFE;
$primary-2: #CFE3FE;
$primary-3: #A0C5FE;
$primary-4: #20AAEE;
$primary-5: #4E87FB;
$primary-6: #1459FA;
$primary-7: #0E44D7;

$color-text-1: #394D73;
$color-text-2: #465A80;
$color-text-3: #A3B0CC;
$color-text-4: #D3DBEB;

$color-border-3: #D3DBEB;
$color-border-2: #EBF0FA;
$color-fill-4: #E6EAF0;
$color-fill-3: #F2F4F7;
$color-fill-2: #F0F4FA;
$color-fill-1: #F7F9FC;

$success-6:#34C94F;
$success-5: #62DE6D;
$success-7: #26AC4B;
$success-4: #16C084;
$success-3: #B7F9AF;
$success-2: #DEFCD6;
$success-1: #E8FCE3;

$warning-6: #FFAC38;
$warning-5: #FFC769;
$warning-7: #DB8928;
$warning-4: #F09F1D;
$warning-3: #FFE7AF;
$warning-2: #FFF2CC;
$warning-1: #FFF7E0;

$danger-6: #FF4C38;
$danger-5: #FF8469;
$danger-7: #DB2C28;
$danger-4:#F71414;
$danger-3: #FFCAAF;
$danger-2: #FFE8D7;
$danger-1: #FFF0E5;
  

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass javascript
:export {
  menuColor: $base-menu-color;
  menuLightColor: $base-menu-light-color;
  menuColorActive: $base-menu-color-active;
  menuBackground: $base-menu-background;
  menuLightBackground: $base-menu-light-background;
  subMenuBackground: $base-sub-menu-background;
  subMenuHover: $base-sub-menu-hover;
  sideBarWidth: $base-sidebar-width;
  logoTitleColor: $base-logo-title-color;
  logoLightTitleColor: $base-logo-light-title-color;
  primaryColor: $--color-primary;
  successColor: $--color-success;
  dangerColor: $--color-danger;
  infoColor: $--color-info;
  warningColor: $--color-warning;
  
  // Primary colors
  primary1: $primary-1;
  primary2: $primary-2;
  primary3: $primary-3;
  primary4: $primary-4;
  primary5: $primary-5;
  primary6: $primary-6;
  primary7: $primary-7;

  // Text colors
  textColor1: $color-text-1;
  textColor2: $color-text-2;
  textColor3: $color-text-3;
  textColor4: $color-text-4;

  // Border colors
  colorBorder2: $color-border-2;
  colorBorder3: $color-border-3;

  // Fill colors
  fillColor1: $color-fill-1;
  fillColor2: $color-fill-2;
  fillColor3: $color-fill-3;
  fillColor4: $color-fill-4;

  // Success colors
  success1: $success-1;
  success2: $success-2;
  success3: $success-3;
  success4: $success-4;
  success5: $success-5;
  success6: $success-6;
  success7: $success-7;

  // Warning colors
  warning1: $warning-1;
  warning2: $warning-2;
  warning3: $warning-3;
  warning4: $warning-4;
  warning5: $warning-5;
  warning6: $warning-6;
  warning7: $warning-7;

  // Danger colors
  danger1: $danger-1;
  danger2: $danger-2;
  danger3: $danger-3;
  danger4: $danger-4;
  danger5: $danger-5;
  danger6: $danger-6;
  danger7: $danger-7;
}

// css 中可使用 例如：color: var(--primary-7)
:root {
  // Primary colors
  --primary-1: #{$primary-1};
  --primary-2: #{$primary-2};
  --primary-3: #{$primary-3};
  --primary-4: #{$primary-4};
  --primary-5: #{$primary-5};
  --primary-6: #{$primary-6};
  --primary-7: #{$primary-7};

  // Text colors
  --text-color-1: #{$color-text-1};
  --text-color-2: #{$color-text-2};
  --text-color-3: #{$color-text-3};
  --text-color-4: #{$color-text-4};

  // Border colors
  --border-color-2: #{$color-border-2};
  --border-color-3: #{$color-border-3};

  // Fill colors
  --fill-color-1: #{$color-fill-1};
  --fill-color-2: #{$color-fill-2};
  --fill-color-3: #{$color-fill-3};
  --fill-color-4: #{$color-fill-4};

  // Success colors
  --success-1: #{$success-1};
  --success-2: #{$success-2};
  --success-3: #{$success-3};
  --success-4: #{$success-4};
  --success-5: #{$success-5};
  --success-6: #{$success-6};
  --success-7: #{$success-7};

  // Warning colors
  --warning-1: #{$warning-1};
  --warning-2: #{$warning-2};
  --warning-3: #{$warning-3};
  --warning-4: #{$warning-4};
  --warning-5: #{$warning-5};
  --warning-6: #{$warning-6};
  --warning-7: #{$warning-7};

  // Danger colors
  --danger-1: #{$danger-1};
  --danger-2: #{$danger-2};
  --danger-3: #{$danger-3};
  --danger-4: #{$danger-4};
  --danger-5: #{$danger-5};
  --danger-6: #{$danger-6};
  --danger-7: #{$danger-7};
}